<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模版字符串</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.11/purify.js"></script>
</head>
<body>
  <script>
    /**
     * 1. 将变量/表达式潜入其中
     * 2. 实现换行，更加格式化
     * 3. 模版字符串的方法
     * 4. 标签字符串防止xss攻击
    */
   
    // 1.将变量/表达式潜入其中,省去了传统字符串的拼接
    const age = 18;
    console.log(`我今天${age}`);
    const varTemp = `这个随机数是${Math.random()}`;
    console.log('varTemp', varTemp);

    // 2. 实现换行，更加格式化，可读性更强
    const DOMEle1 = '<div>\n<span>DOMEle</span>\n</div>'
    const DOMEle2 = `<div>
        <span>DOMEle</span>
      </div>`;
    const strEle = `我是
    小陈`;
    console.log('DOMEle1', DOMEle1);
    console.log('DOMEle2', DOMEle2);
    console.log('strEle', strEle);

    // 3. 模版字符串的方法（startsWith/endsWith/includes/repeat）
    const name = 'cscs';
    console.log('startsWith', name.startsWith('cs'));
    console.log('startsWithIndex', name.startsWith('cs', 1)); // 从第几个开始检测
    console.log('endsWith', name.endsWith('cs'));
    console.log('endsWithIndex', name.startsWith('s', 1)); // 以第几个作为结束
    console.log('includes', name.includes('cs'));
    console.log('repeat', name.repeat()); // 参数为0或者直接不填直接清空字符串
    console.log('repeat', name.repeat(1)); // cscs
    console.log('repeat', name.repeat(2)); // cscscs

    // 4. 标签字符串防止xss攻击, 也可以使用（npm install sanitize-html）包
    const xssStr = `
      <img src='' onload={} />
    `;
    console.log('purify sanitize', DOMPurify.sanitize(xssStr)); // <img src="">
  </script>
</body>
</html>